<template>
    <div class="page">
        <div class="content" ref="main"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    methods: {
        // 检测屏幕
        screen() {
            this.myEcharts.resize();
            let width = this.$refs.main.offsetWidth;
            let num = width / 100 * 5;
            console.log(num);
            let legStyle = width / 100 * 6;
            console.log(legStyle);
            // let subleft = width/100*2
            let options = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                },
                legend: {
                    top: legStyle,
                    left: legStyle
                }
            }
            this.myEcharts.setOption(options)

        },
        // 初始化
        initEcharts() {
            let main = this.$refs.main;
            this.myEcharts = this.$echarts.init(main,this.themeStatus);

        },
        // 获取数据
        async getData() {
            let data = await this.$axios('/CropGrowthTrend');
            console.log(data);
            let monthList = data.data[0].content.map(item => {
                return item.month;
            })
            let seriesData = data.data.map(item => {
                // console.log(item.content);

                let area = item.content.map(item1 => {
                    // console.log(item1);
                    return item1.area
                })
                return {
                    type: 'line',
                    data: area,
                    name: item.city,
                    smooth: true,//是否开启平滑
                    // top:'20%',
                    // left:'20%'
                }
            })

            this.setOption(monthList, seriesData)
        },
        // 绘制图表
        setOption(monthList, seriesData) {
            let options = {
                title: {
                    text: '主要地区农作物种植增长趋势',
                    // left: 20,
                    // top: 20,
                },
                // 设置图例
                legend: {
                    show: true,
                    icon: 'circle',//设置图例的形状
                    top: 20,
                    left: 20
                },
                // 调整图表的位置
                grid: {
                    top: '15%',
                    left: '15%',
                    bottom: '10%',
                    right: '10%',
                },
                xAxis: {
                    data: monthList,
                    boundaryGap: false,//是否俩边留白
                },
                yAxis: {
                    // 是否显示y轴线
                    axisLine: {
                        show: true
                    }

                },
                series: seriesData
            }
            this.myEcharts.setOption(options);
            this.screen();

        }
    },
    mounted() {
        this.initEcharts()
        this.getData();
        window.addEventListener('resize', this.screen);
        // this.screen();
    },
    watch: {
        // 监听切换主题
        themeStatus(){
            // 销毁之前的实例
            this.myEcharts.dispose();
            this.initEcharts();
            this.getData()
            this.screen();
        }
    },
    computed: {
        themeStatus(){
            return this.$store.state.theme
        }
    },
    filters: {},
    components: {},
}
</script>
<style scoped></style>